<template>
  <div class="mindWidth">
    <div class="patent_item">
      <span class="changeHanld" @click="handleClick()">全部专利 {{ allData.allPatentTotal || 0 }} 个</span>
      <span
        class="changeHanld"
        @click="handleClick('发明授权')"
      >发明授权 {{ allData.authorizePatentTotal || 0 }} 个</span>
      <span
        class="changeHanld"
        @click="handleClick('发明公布')"
      >发明公布 {{ allData.publishPatentTotal || 0 }} 个</span>
      <span
        class="changeHanld"
        @click="handleClick('实用新型')"
      >实用新型 {{ allData.utilityModelPatentTotal || 0 }} 个</span>
      <span
        class="changeHanld"
        @click="handleClick('外观设计')"
      >外观设计 {{ allData.exteriorDesignPatentTotal || 0 }} 个</span>
    </div>
    <!-- 文章的表格内容 -->
    <div class="table_tab" v-show="patentData.length">
      <div class="table_hd">
        <div class="name">专利名称</div>
        <div class="type">专利类型</div>
        <div class="date">公布日期</div>
        <div class="patent_num">专利号</div>
      </div>
      <div class="table_bd" v-for="(item, index) in patentData" :key="index">
        <div class="name_content" @click="toDetail(item)">
          <div class="active_content singlerows">{{ item.patentName }}</div>
          <span style="color: red; font-size: 12px">
            {{
            item.patentStatus
            }}
          </span>
        </div>
        <div class="type_content">{{ item.typeDesc }}</div>
        <div class="date_content">{{ item.noticeTime }}</div>
        <div class="patent_num_content">{{ item.applicationNumber }}</div>
      </div>
    </div>
    <!-- 没有数据 -->
    <div class="table_bd_item" v-show="isLogin || dialogVisible || !patentData.length">
      <!-- 没有登录 -->
      <div class="noData" v-if="isLogin">
        <img src="../../static/image/noData.png" alt />
        您尚未登录
        <a @click="toLogin" style="font-weight: 600">立即登录</a>查看更多
      </div>
      <!-- 查询次数上限 -->
      <div class="noQueryData" v-else-if="dialogVisible">
        您的查询次数已满
        <a @click="toVIPPage">立即开通</a>会员
      </div>
      <div class="noData" v-else-if="!patentData.length && !isLogin">暂无数据</div>
    </div>
    <div class="pageList">
      <paging ref="paging_zi" :pageNo="pages" @CurrentPage="accept_CurrentValue" />
    </div>

    <el-dialog
      width="700px"
      :show-close="true"
      :visible.sync="showDetail"
      :close-on-click-modal="false"
    >
      <div class="patent-content">
        <div class="name">{{ patentInfo.patentName }}</div>
        <div class="flex">
          <div class="lable">申请号</div>
          <div class="lable">申请日期</div>
        </div>
        <div class="flex">
          <div class="lable-info">{{ patentInfo.applicationNumber || '暂无' }}</div>
          <div class="lable-info">{{ patentInfo.applyTime || '暂无' }}</div>
        </div>
        <div class="flex">
          <div class="lable">申请人</div>
          <div class="lable">发明人</div>
        </div>
        <div class="flex">
          <div class="lable-info">{{ patentInfo.applicant || '暂无' }}</div>
          <div class="lable-info">{{ patentInfo.inventor || '暂无' }}</div>
        </div>
        <div class="flex">
          <div class="lable">法律状态</div>
        </div>
        <div class="flex">
          <div class="lable-info">{{ patentInfo.legalStatus || '暂无' }}</div>
        </div>
        <div class="flex">
          <div class="lable">摘要</div>
        </div>
        <div class="flex">
          <div class="lable-info">{{ patentInfo.summary || '暂无' }}</div>
        </div>
      </div>
    </el-dialog>
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>

<script>
import paging from "../../components/paging.vue";
import { commonRequest } from "../../api/api.js";
import loginDialog from "../../components/login_item/LoginDialog";
export default {
  name: "patent",
  components: {
    paging,
    loginDialog
  },
  data() {
    return {
      patentData: "",
      allData: {}, // 专利详情信息
      pages: 1,
      dialogVisible: false, // 查询次数已满
      showDetail: false, // 专利详情
      patentInfo: {},
      isLogin: false, //判断是否登录
      text: "",
      id: this.$route.query.id || this.$route.params.id
    };
  },
  mounted() {
    this.dataQq();
    if (!this.patentData.length) {
      console.log(this.patentData.length, "data length1");
    } else {
      console.log(this.patentData.length, "data length2");
    }
  },
  methods: {
    toLogin() {
      this.$refs.login.open();
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    toDetail(item) {
      this.showDetail = true;
      commonRequest("/api/cms/cmsPatent/patentInfo", {
        applicationNumber: item.noticeNumber,
        companyId: this.id
      }).then(res => {
        this.patentInfo = res;
      });
    },
    handleClick(val) {
      this.pages = 1;
      this.text = val;
      this.dataQq();
    },
    accept_CurrentValue: function(value) {
      this.pages = value;
      this.dataQq();
    },
    dataQq(val) {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.isLogin = true;
        return;
      }
      let params = {
        id: this.$route.query.id,
        pageNo: this.pages,
        pageSize: 10,
        typeDesc: this.text
      };
      if (!this.text) {
        this.$delete(params, "typeDesc");
      }
      commonRequest("/api/cms/cmsPatent/list", params).then(res => {
        if (res.code === 10001) {
          this.isLogin = true;
        } else if (res.code == 10005) {
          this.dialogVisible = true;
        } else {
          this.patentData = res.patentPage.records;
          this.allData = res;
          this.$refs.paging_zi.totalValue(res.patentPage.total);
        }
      });
    },
    // 去升级vip页
    toVIPPage() {
      window.open("/pageVIP", "_balnk");
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .el-dialog__footer {
  height: 310px;
}

// 是否显示输入框
.table_bd_item {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    color: #44a2ff;
  }
}

.patent_item {
  display: flex;
  align-items: center;
  height: 60px;
  margin: 10px auto;

  span {
    padding: 5px 11px;
    background-color: #e8f3ff;
    color: #44a2ff;
    font-size: 14px;
    border-radius: 4px;
    margin-right: 10px;
  }
}

.table_tab {
  border: 1px solid #ccc;
  background-color: #fff;
  border-bottom: none;

  .table_hd {
    display: flex;
    align-items: center;
    height: 50px;

    div {
      display: flex;
      align-items: center;
      height: 100%;
      padding-left: 10px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
    }

    .name {
      width: 550px;
      border-right: 1px solid #ccc;
    }

    .type {
      width: 150px;
      border-right: 1px solid #ccc;
    }

    .date {
      width: 180px;
      border-right: 1px solid #ccc;
    }

    .patent_num {
      width: 320px;
    }
  }

  .table_bd {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #ccc;

    div {
      font-size: 14px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .name_content {
      padding-left: 10px;
      width: 550px;
      display: flex;
      align-items: center;
      border-right: 1px solid #ccc;

      span {
        color: #f24d3a;
        background-color: #ffebe8;
        padding: 2px 8px;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .type_content {
      width: 150px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .date_content {
      width: 180px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .patent_num_content {
      width: 320px;
      border-right: none;
      padding-left: 10px;
    }
  }
}

.pageList {
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.patent-content {
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px 15px;
  color: #000000;

  .name {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
  }

  .flex {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;

    .lable {
      font-size: 14px;
      font-weight: 600;
      flex: 1;
    }

    .lable-info {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      flex: 1;
      line-height: 24px;
    }
  }
}
</style>
